<template>
  <div>
    <el-row :gutter="10" type="flex" align="middle" class="t" v-for="(item,index) in shareUrls">
      <el-col :span="5">进件链接{{ item.id }}</el-col>
      <el-col :span="12">
        <span class="sj" @click="copy(item.shareUrl)">{{ item.shareUrl }}</span>
      </el-col>
      <el-col :span="2">
        <el-tag effect="dark" @click.native="showQrCode(item)">二维码</el-tag>
      </el-col>
      <el-col :span="5">
        <el-tag effect="dark" type="danger" @click="removeCode(item.id)">移除停用</el-tag>
      </el-col>
    </el-row>

    <el-row :gutter="10" type="flex" align="middle" class="t">
      <el-col :span="5">编辑链接/二维码</el-col>
      <el-col :span="12">
        <div class="edit">
          填写人可修改备注:
          <el-switch
            v-model="isEdit"
            @change="updataList()"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </el-col>
      <el-col :span="7">
        <el-button size="mini" type="primary" @click="addUrl()">新增链接</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" type="flex" align="middle" class="t">
      <el-col :span="20" :offset="5">
        <div class="edit">
          进件备注：
          <input v-model="remark" placeholder="请输入备注" style="width: 150px">
          <button @click="updataList()">写入</button>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" type="flex" align="middle" class="t">
      <el-col :span="5">进件二维码</el-col>
      <el-col :span="6">
        <div @click="downloadImg($refs.qrCodeDiv)" ref="qrCodeDiv" class="invite">
          <div class="invite_p">进件链接{{ id }}二维码</div>
          <img id="qrcode" style="width: 120px;height: 120px;margin: 0 auto" :src="qrImg">
          <div class="invite_p">备注：{{ remark ? remark : '暂无' }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        点击二维码即可下载
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QRCode from "qrcode";

  import {qrSet, downloadImg} from "@/utils/options"
  import {shareCode, insertCode, deleteCode} from "@/api/system/user"

  export default {
    name: "invite-add",
    data() {
      return {
        remark: null,
        isEdit: false,
        shareCodes: [],
        shareUrls: [],
        qrImg: null,
        id: 0
      }
    },
    created() {
      this.pullShareCode()
    },
    methods: {
      copy(text) {
        this.$clipboard(text)
        this.$modal.msgSuccess('已复制')
      },
      addUrl() {
        this.$modal.loading("生成中...")
        insertCode().then(res => {
          if (res.code == 200) {
            this.pullShareCode()
          }
          this.$modal.closeLoading()
        })
      },
      removeCode(id) {
        this.$modal.loading("移除停用中...")
        deleteCode(id).then(res => {
          if (res.code == 200) {
            this.pullShareCode()
          }
          this.$modal.closeLoading()
        })
      },
      pullShareCode() {
        shareCode().then(res => {
          this.shareCodes = res.data
          this.updataList()
        })
      },
      updataList() {
        let baseUrl = window.location.origin + '/invite?'
        baseUrl += (this.isEdit ? 'edit=1&' : '')
        baseUrl += (this.remark ? 'remark=' + this.remark + '&' : '')
        this.shareUrls = []
        for (let item of this.shareCodes) {
          this.shareUrls.push({
            shareUrl: baseUrl + 'code=' + item.shareCode,
            id: item.id
          })
        }
        this.showQrCode(this.shareUrls[0])
      },
      showQrCode(item) {
        this.id = item.id
        let shareUrl = item.shareUrl
        QRCode.toDataURL(shareUrl, (err, qrCodeData) => {
          if (err) console.error(err)
          this.qrImg = qrCodeData
        })
      },
      downloadImg
    }
  };
</script>

<style lang="scss">
  .t {
    font-size: 15px;
    padding-bottom: 4px;
  }

  .sj {
    color: rgb(64, 158, 255);
  }

  .edit {
    font-size: 15px;
    padding: 4px 0
  }

  .invite {
    width: 160px;
    padding: 5px 16px;
    border-radius: 5px;
    background-color: #dae8e6;
    text-align: center;
    font-size: 12px
  }

  .invite_p {
    width: 120px;
    padding: 8px 0;
    text-align: center;
  }
</style>


